<template>

<!--  后台UI布局组件 -->
  <div class="common-layout">
    <el-container>
      <el-header class="el-header" height="35px">

        <div style="height: 35px; padding-top: 8px">
          东软云医院HIS系统
          <span style="text-align: right;
            padding-left: 78%;
            font-size: 18px">
            欢迎：root&nbsp;&nbsp;
            <el-link>退出</el-link>

          </span>
        </div>

      </el-header>
      <el-container class="el-containerx">
        <el-aside  width="200px" class="el-aside">
          系统菜单

          <el-tree
              style="max-width: 600px"
              :data="menuList"
              @node-click="handleNodeClick"

          />

        </el-aside>
        <!--  后退首页布局的右边 -->
        <el-main class="el-main">
        <!-- 根据左边点击的菜单显示不用组件 -->
          <component :is="currentComponent"></component>
        </el-main>
      </el-container>
    </el-container>


  </div>


</template>


<script>
  /*导入组件*/
  import OnsiteRegistratiion from "@/views/OnsiteRegistratiion.vue";
  import RegistrationRecord from "@/views/RegistrationRecord.vue";
  import axios from "axios";
  import PhysicianPatient from "@/views/PhysicianPatient.vue";
  import HomeMedicalRecord from "@/views/HomeMedicalRecord.vue";
  import CheckRequest from "@/views/CheckRequest.vue";
  import ExpenseCharge from "@/views/ExpenseCharge.vue";
  import CheckApply from "@/views/CheckApply.vue";
  import CheckPatient from "@/views/CheckPatient.vue";
  import CheckInput from "@/views/CheckInput.vue";
  import PhysicianHistory from "@/views/PhysicianHistory.vue";
  import CheckResults from "@/views/CheckResults.vue";
  import OutpatientDiagnosis from "@/views/OutpatientDiagnosis.vue";
  import WritePrescription from "@/views/WritePrescription.vue";
  import GiveMedicine from "@/views/GiveMedicine.vue";
  import DrugStorage from "@/views/DrugStorage.vue";
  import ExpenseManage from "@/views/ExpenseManage.vue";
  import DrugMedicine from "@/views/DrugMedicine.vue";

  export default {
    /*注册组件*/
    components: {
      DrugMedicine,
      ExpenseManage,
      DrugStorage,
      GiveMedicine,
      WritePrescription,
      OutpatientDiagnosis,
      CheckResults,
      PhysicianHistory,
      CheckInput,
      CheckPatient,
      CheckApply,
      ExpenseCharge,
      CheckRequest, HomeMedicalRecord, PhysicianPatient, RegistrationRecord, OnsiteRegistratiion},
    data(){
      return {
        currentComponent:'',
        menuList:[],
      }
    },
    //加载事件，加载左侧菜单
    mounted() {
      axios.get("http://localhost/his/queryMenusList")
          .then((response) => {
            this.menuList = response.data;
          })
          .catch((error) => {
            console.log(error);
          });
    },
    methods:{
      //tree节点的单击事件
      handleNodeClick(data,node){
        console.log(data);
        console.log(node);
        if(node.isLeaf){
          //点击左侧菜单打开不同的组件
          this.currentComponent=data.component;
        }
      }
    }
  }

</script>

<style>
  .el-header{
    background-color: cadetblue;
    text-align: left;
  }
  .el-aside{
    background-color: beige;

  }
  .el-main{
    background-color: burlywood;
  }
  .el-containerx{
    height: 670px;
  }

</style>